import React, { Component } from 'react';
import { create_request_shopcarlist } from '../../store/actionCreators/index'
import { good_shopcartadd, good_shopcartlist, good_shopcartsub, good_shopcartclear } from '../../utils/api'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { Avatar } from 'antd-mobile'
import { Stepper } from 'antd-mobile'
import { Checkbox, Space, Toast } from 'antd-mobile'
import { Arrow } from '@react-vant/icons';
import './Shopcart.scss'

class Shopcart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pic: 'https://img11.18183.com/ku18183/image/2020/09/10/837f24d9574c5e74b08c789505954873.png',
            count: 0,
        }
    }

    componentDidMount() {
        this.props.request_shopcarlist();

        this.addprice();
    }

    // 商品加1
    addgood(item) {
        if (item.count < 8 || item > -1) {
            var id = JSON.parse(localStorage.getItem('userinfo')).id
            good_shopcartadd({ userid: id, goodid: item.id }).then((res) => {
                this.props.request_shopcarlist();
                this.addprice();
            })
        } else {
            Toast.show({
                icon: 'success',
                content: '不好意思，限购8件！',
            })
        }
    }

    // 商品减一
    subgood(item) {
        if (item.count <= 8 || item > 0) {
            var id = JSON.parse(localStorage.getItem('userinfo')).id
            good_shopcartsub({ userid: id, goodid: item.id }).then((res) => {
                this.props.request_shopcarlist();
                this.addprice();
            })
        }
    }

    // 点击跳往详情页
    togoodinfo(id) {
        this.props.history.push({ pathname: '/goodinfo', state: { id } })
    }

    // 添加商品价格加
    addprice() {
        var allprice = 0
        this.props.list.forEach(item => {
            allprice += item.count * parseInt(item.salesPrice.value)
        });
        // console.log(this.state.allprice);
        return allprice;
    }

    // 点击清空购物车
    clear() {
        var id = JSON.parse(localStorage.getItem('userinfo')).id
        good_shopcartclear({ userid: id }).then((res) => {
            this.props.request_shopcarlist();
        })
    }



    render() {
        return (
            <div className='shopcart'>
                <div className='head'>
                    <p className='car'>购物车(<span>{this.props.list.length}</span>)</p>
                    <div className='shopcartbox'>
                        <Avatar className='img' src={this.state.pic} />
                        <div className='txt'>
                            <span>cdf会员购</span>
                            <span onClick={() => { this.clear() }}> 清空</span>
                        </div>
                    </div>
                    <div className='yixuan'>
                        <h6>换购</h6>
                        <span>已满￥<span>200</span>,享超值换购，已选<span>0</span>/<span>1</span></span>
                        <p>立即挑选<Arrow /></p>
                    </div>
                </div>
                {
                    this.props.list.length == 0 ?
                        <>
                            <div className="empty">
                                <p>好凄凉，购物车里还木有东西呢，</p>
                                <p>快去挑选心爱的商品吧</p>
                            </div>
                        </> :
                        this.props.list.map((item, index) => {
                            return (
                                <div className='shoplist' key={index}>
                                    <div className='shopbox'>
                                        <div className='check'>
                                            <Checkbox style={{ '--icon-size': '18px' }} checked={item.ischeck} />
                                        </div>
                                        <div className='shopright'>
                                            <div className='img'>
                                                <img src={item.pic} alt="" onClick={() => { this.togoodinfo(item.id) }} />
                                            </div>
                                            <div className='title'>
                                                <h3 onClick={() => { this.togoodinfo(item.id) }}>{item.name}</h3>
                                                <span>包邮包税</span>
                                                <span>满￥200/800,享超值换购</span>
                                                <span>3天后恢复原价</span>
                                                <p>￥<span>{parseInt(item.salesPrice.value)}</span></p>
                                                <div className='watch'>
                                                    <div className="change">
                                                        <span onClick={() => { this.subgood(item) }}>-</span>
                                                        <span>{item.count}</span>
                                                        <span onClick={() => { this.addgood(item) }}>+</span>
                                                    </div>
                                                    <span className='xian'>限购8件</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                }

                <div className="bot">
                    <div className='check'>
                        <Checkbox style={{ '--icon-size': '18px' }} defaultChecked />
                        <span>全选</span>
                    </div>

                    <div className="gofu">
                        <span>总价：</span>
                        <span className='price'>￥{this.addprice()}</span>
                        <button>去结算<span>({this.props.list.length})</span></button>
                    </div>
                </div>
            </div>
        );
    }
}

// export default Shopcart;
export default connect(
    (state) => { //注入(绑定)store中的数据到 组件的props中
        return {
            list: state.shopcartlist
        }
    },
    (dispatch) => { //注入(绑定)方法 到组件的props中
        return {
            request_shopcarlist: function () {
                dispatch(create_request_shopcarlist())
            },
        }
    }
)(withRouter(Shopcart))